<template>
    <div id="signin">
        <div class="cover">
            <div id="leftPanel">
                <div id="leftTop">
                    <div class="circle"></div>
                    <div class="circle"></div>
                    <div class="circle"></div>
                </div>
                <div id="leftBottom">
                    <ul>
                        <li>
                            <i class="fa fa-camera-retro"></i>
                            <span>彩票资讯</span>
                        </li>
                        <li>
                            <i class="fa fa-university" aria-hidden="true"></i>
                            <span>开奖管理</span>
                        </li>
                        <li>
                            <i class="fa fa-cog" aria-hidden="true"></i>
                            <span>彩票工具</span>
                        </li>
                        <li>
                            <i class="fa fa-bar-chart" aria-hidden="true"></i>
                            <span>数据图表</span>
                        </li>
                    </ul>
                </div>
            </div>
            <div id="rightPanel">
                <el-form :model="userInfo"
                :rules="rules" ref="userInfo"
                >
                <ul>
                    <li style="font-size:40px;color:white">
                        以钱赚钱啦
                    </li>
                    <li style="width:80%">
                        <el-form-item prop="accountName">
                            <el-input placeholder="请输入用户名"
                            class="userInput"
                            v-model="userInfo.accountName"
                            />
                        </el-form-item>
                    </li>
                    <li style="width:80%">
                        <el-form-item prop="password">
                            <el-input placeholder="请输入用户密码"
                            type="password"
                            class="userInput"
                            v-model="userInfo.password"
                             />
                        </el-form-item>
                    </li>
                    <li style="text-align:left;padding-left:0px">
                        <el-switch
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        v-model="remember"
                        >
                        </el-switch>
                        <span style="color:white;margin-left:10px">记住密码</span>
                    </li>
                    <li>
                        <el-button type="primary" style="width:100%"
                        @click="signin"
                        >登录</el-button>
                    </li>
                </ul>
                </el-form>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            userInfo: {
                accountName:'zmt',
                password:'12345'
            },
            rules:{
                accountName:[
                    {
                        required:true,
                        message:'用户名不能为空',
                        trigger:'blur'
                    },
                    {
                        min:2,
                        max:10,
                        message:'用户名不能少于2个字符',
                        trigger:'blur'
                    }
                ],
                password:[
                    {
                        required:true,
                        message:'密码不能为空',
                        trigger:'blur',
                    },
                    {
                        min:5,
                        max:16,
                        message:'用户名不能少于5个字符',
                        trigger:'blur'
                    }
                ]
            },
            remember:true
        }
    },
    methods:{
        signin(){
            this.$refs['userInfo'].validate((valid)=>{
                if(valid){
                    this.$http.post(this.$apis.signIn,this.userInfo)
                    .then((resp)=>{
                        // console.log("jdkadk");
                        if(resp.data.success){
                            localStorage.setItem('remember',this.remember);
                            localStorage.setItem('token',resp.data.token);
                            localStorage.setItem('response',JSON.stringify(resp.data.response));

                            if(this.$route.query.redirect){
                                // console.log("验证通过")
                                // console.log(this.$route.query.redirect);
                                this.$router.push(this.$route.query.redirect);
                            }else{
                                // console.log("登录")
                                this.$router.push('/Home');
                            }
                        }else{
                            this.$message.error('登录失败,请重新登录');
                        }
                    })
                }else{
                    // console.log('账号或密码错误');
                    return false;
                }
            });
        }
    }
}
</script>
<style lang="scss">
    #signin {
        width:100%;
        height:100%;
        background:url(../../assets/logo1.jpg) no-repeat;
        background-size:cover;
        .cover {
            width:100%;
            height:100%;
            background: rgba(0,0,0,0.4);
            display:flex;
            flex-direction:row;
            #leftPanel{
                width:70%;
                height:100%;
               #leftTop {
                    width:100%;
                    height:70%;
                    display:flex;
                    justify-content: center;
                    align-items: center;
                    .circle{
                       width:200px;
                       height:200px;
                       border-radius:50%;
                       &:nth-child(1){
                           position: absolute;
                           top:20%;
                           background:rgba(240,197,158,0.3);
                       }
                       &:nth-child(2){
                           position: absolute;
                           top:35%;
                           left:20%;
                           background:rgba(85,212,191,0.3);
                       }
                       &:nth-child(3){
                           position: absolute;
                           top:35%;
                           left:35%;
                           background:rgba(82,89,197,0.3);
                       }
                   }
               }
               #leftBottom{
                    width:100%;
                    height:30%;
                    ul {
                        width:100%;
                        height:100%;
                        display:flex;
                        flex-direction:row;
                        justify-content:center;
                        li {
                            margin-left: 80px;
                            display:flex;
                            flex-direction:column;
                            color:rgba(255,255,255,0.5);
                            span {
                                margin-top:20px;
                                text-align:center;
                            }
                            i{
                                font-size:60px;

                            }
                        }
                    }
                }
            }
            
            #rightPanel{
                width:30%;
                height:100%;
                background:rgba(0,0,0,0.6);
                ul{
                    width:100%;
                    height:100%;
                    display:flex;
                    justify-content:center;
                    flex-direction:column;
                    align-items: center;
                    li{
                        text-align:center;
                        margin-bottom:20px;
                        width: 80%;
                        .userInput {
                            width:100%;
                            text-align:center;
                            & > .el-input__inner {
                                background:rgba(0,0,0,0);
                                width:100%;
                            }
                        }
                    }
                }
            }
        }
    }
</style>